<template>
  <div class="footer">
    <div :class="{hight: obj.comName === currentComName}"
    v-for="obj in footerList"
    :key="obj.comName"
    @click="changeComName(obj.comName)">
    <p><i :class="obj.icon"></i></p>
    <p>{{ obj.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        footerList:{
            type: Array,
            default:()=>[{
                text: '电影列表',
                comName: 'filmList',
                icon: 'el-icon-tickets'
            },{
                text: '电影搜索',
                comName: 'filmSearch',
                icon: 'el-icon-search'
            }],
            validator(list){
                if(list.length >= 2 && list.length <=5){
                    return true
                } else {
                    return true
                }
            }
        }
    },
    data(){
        return{
            currentComName: 'filmList'
        }
    },
    methods:{
        changeComName(comName){
            this.currentComName = comName
            this.$emit('changeComName',comName)
        }
    }
}
</script>

<style scoped>
.footer{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        border-top: 1px solid #0006;
        background: #fff;
    }
    .footer p {
        text-align: center;
    }
    .hight {
        color: #409eff;
    }
</style>